<?php


//Local DB
$hostname="localhost";
$username="root";
$password="garbage11";
$dbname="spelling_bee";



//Session Stuff:
define("COLUMN_COOKIE", "COLUMN_COOKIE");
define("SHUFFLE_COOKIE", "SHUFFLE_COOKIE");
define("SEARCH_TERM_COOKIE", "SEARCH_TERM_COOKIE");

//Start Connection
mysql_connect($hostname,$username, $password) OR DIE (" ");
mysql_select_db($dbname);

$group_list_passed = isset($_POST['group_list']);
$group_list_cookie = isset($_COOKIE[COLUMN_COOKIE]);

if ($group_list_passed || $group_list_cookie) {
	if ($group_list_passed)	
	{
		$column_id = implode(',',$_POST['group_list']);
		setcookie(COLUMN_COOKIE, $column_id, time()+60*60*24*30);
	}
	else
		$column_id = $_COOKIE[COLUMN_COOKIE];
}
else {
	$column_id = 1;
}

//SAMPLES:
//	ass
//  tion
//  ly
//  ous
//  ent
//  ance
//  ence
$search_term_passed = isset($_POST['search_term']);
$search_term_cookie = isset($_COOKIE[SEARCH_TERM_COOKIE]);

if ($search_term_passed || $search_term_cookie) {
	if ($search_term_passed)	
	{
		$search_term = $_POST['search_term'];
		setcookie(SEARCH_TERM_COOKIE, $search_term, time()+60*60*24*30);
	}
	else
		$column_id = $_COOKIE[SEARCH_TERM_COOKIE];
}
else {
	$search_term = '';
}



$column_array = explode(',',$column_id); //used for selecting options

$shuffle_passed = isset($_POST['shuffle']);
$shuffle_cookie = isset($_COOKIE[SHUFFLE_COOKIE]);

if ($shuffle_passed || $shuffle_cookie) {
	//If parameter passed, set that as the new cookie
	if ($shuffle_passed)	
	{
		setcookie(SHUFFLE_COOKIE, $_POST['shuffle'], time()+60*60*24*30); //will set the cookie to expire in 30 days
		$shuffle_value = $_POST['shuffle'];
	}
	else
		$shuffle_value = $_COOKIE[SHUFFLE_COOKIE];
	
	
	//Now determined shuffled based on cookie.
	$shuffle_words = $shuffle_value === 'yes' ? true : false;
}
else {
	$shuffle_words = false;
}

	//Get groups
	$query = 'SELECT id, page_group FROM page_group';
					
	$result = mysql_query($query);
	

	if($result)
	{					
		$select_size = mysql_num_rows($result);
		$selected_text = '';
		$group_list = '';
		while($row = mysql_fetch_array($result)) {
			$selected_text = in_array($row['id'], $column_array) ? 'selected = "selected"' : '';
			$group_list .= '<option value="'.$row['id'].'" '.$selected_text.'>'.$row['page_group'].'</option>';
		}
	
	}

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Bee</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="en-US">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
	//JQuery Shuffle
	(function($){$.fn.shuffle = function() {return this.each(function(){var items = $(this).children().clone(true);return (items.length) ? $(this).html($.shuffle(items)) : this;});};$.shuffle = function(arr) {for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);return arr;}})(jQuery);
</script>
<script type='text/javascript'> 
  $(document).ready(function() {
  
		$(".shuffleSelect").val('<?php echo $shuffle_words ? 'yes' : 'no';?>');
					
					$( ".options" ).hide();
		
		$("#define_word").click(function(e){ 
			e.preventDefault(); 
			ajax_search(); 
		}); 
			
		function ajax_search(){ 
		  $('#content').show(); 
		  var search_val=$('#content').html(); 
		  $.post("./define.php", {search_term : search_val}, function(data){
		   if (data.length>0){ 
		     $('#hiddenText').html(data); 
		   } 
		  })
		}; 
		
		// set effect from select menu value
		$( "#option_button" ).click(function() {
		var button = document.getElementById('option_button');
		var buttonText = (button.innerHTML);
		if (buttonText == 'Hide Options')
		{
                    $( ".options" ).hide( "blind");
                    button.innerHTML = 'Show Options';
		}
		else
		{
                    $( ".options" ).show( "blind");
                    button.innerHTML = 'Hide Options';
		}
    		return false;
		}); 
			
			
		var sightWords=[
			<?php
					$query	 =	'SELECT `word` FROM word WHERE `group_id` IN ('.$column_id.') ';
					$query	.=	strlen($search_term) == 0 ? '' : 'AND `word` LIKE \''.$search_term.'\' ' ;
					$query	.=	'ORDER BY ID';
					
					$result = mysql_query($query);

					if(!$result)
						echo 'no records';
					else
					{		
						$word_list = '';
						while($row = mysql_fetch_array($result)) {
							$word_list .= $row['word'].'\',\'';
						}
						
						$word_list = substr($word_list,0,-2);
						
						$word_list = '\''.$word_list;
						
						echo $word_list;
					}

			?>
		]; 
		
		<?php
			if ($shuffle_words)
				echo 'sightWords = $.shuffle(sightWords);';
		?>
		
		$('body').data('activeWord', 0);
		$('body').data('shuffledArray', sightWords);
		$('button.next').enabled = true;
		//Load the first word
		$('#content').text(sightWords[0]);	
    $('#wordCount').text('Word Count: 1 of ' + sightWords.length);
		
		
		$('button.next').click(function(){
      var activePosition = $('body').data('activeWord');
      var theArray = $('body').data('shuffledArray');
      
      if (activePosition == theArray.length-1)
        return;
      activePosition++;
      $('#content').text(theArray[activePosition]);	
      $('body').data('activeWord', activePosition);
      $('#wordCount').text('Word Count: ' + (activePosition + 1) +' of '  + theArray.length); 
	  $('#hiddenText').html('');	
		});
    
		$('button.previous').click(function(){
      var activePosition = $('body').data('activeWord');
      var theArray = $('body').data('shuffledArray');
      
      if (activePosition ==0)
        return;
      activePosition--;
      $('#content').text(theArray[activePosition]);	
      $('body').data('activeWord', activePosition);
      $('#wordCount').text('Word Count: ' + (activePosition + 1) +' of '  + theArray.length); 
	  $('#hiddenText').html('');	
		});
    

	});  //Close ready function
	
</script>

  <style type="text/css">
  #header 
  {
	background-color: white;
    position: relative;
    height: 150px;
  }
#navbar 
  {
    color: White;
    font-size: 9px;
    line-height: 8px;
    background-color: #6F5CED;
    text-align: center;
    letter-spacing: 4px;
    height: 8px;
  }
#footer 
  {
    color: white;
    font-size: 9px;
    line-height: 16px;
    background-color: #6F5CED;
    text-align: center;
    letter-spacing: 4px;
    height: 16px;
    clear: left
  }
.leftcol 
    {	
	background-color: white;
	float: left;
  font-family: Verdana, helvetica, arial, sans-serif;
  font-size: 100%;
	min-height: 100%; 
	width: 20%;
  text-align:center;
  }
.midcol 
  {
	background-color: white;
    width: 75%;
	float: left;
  }

#content
  {
	border-left: 8px solid #6F5CED;
	background-color: white;
	font-family: Verdana, helvetica, arial, sans-serif;
	font-size: 800%;
	min-height: 100%; 
  }
.updateText
  {	
	background-color: white;
  font-family: Verdana, helvetica, arial, sans-serif;
  font-size: 80%;
  text-align:center;
  font-style:italic; 
  }
  </style>
</head>
<body>
<div id="navbar" >&nbsp;</div>
<div class="leftcol" style="padding-top:5px;">
	<div id="wordCount" style="padding-bottom:10px;">0 of 0</div>
	<div><button class="previous">Previous</button>&nbsp;&nbsp;&nbsp;<button class="next">Next</button></div>
	<form id="searchform" method="post">
		<div style="padding-top:5px;">
			<input type="submit" value = "Define" name="define_word" id="define_word" />
		</div>
	</form>
        <div style="padding-top:5px;">
            <button id="option_button">Show Options</button>
        </div>
	<form class = "options" action="index.php" method="post" >
		<div>
			<select name = "group_list[]" multiple="multiple" size="<?php echo $select_size; ?>">
				<?php echo $group_list; ?>
			</select>
		</div>
	  <div>Shuffle:
			<select class = "shuffleSelect" name="shuffle" >
				<option value="yes">Yes</option>
				<option value="no">No</option>
			</select> 
		</div>
	  <div>
			Search Term: <input type="text" name="search_term" />
		</div>		
	  <input type="submit" value="Reload List" />
	</form> 
</div> <!--Left Col-->
<div id="content" class="midcol">
&nbsp;
</div>
<div id="footer">
&nbsp;
</div>
<div id="hiddenText"></div>
</body>
</html>